{% extends "tools/base_tool.html" %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/encoding-converter.css">
{% endblock %}

{% block content %}
<div class="container py-4">
    <h2 class="mb-4">{{ tool.name }}</h2>
    
    <!-- 编码类型选择 -->
    <div class="mb-4">
        <div class="d-flex">
            <div id="base64-tab" class="tab-button active">Base64</div>
            <div id="url-tab" class="tab-button">URL</div>
            <div id="unicode-tab" class="tab-button">Unicode</div>
            <div id="html-tab" class="tab-button">HTML</div>
        </div>
    </div>
    
    <!-- 操作类型选择 -->
    <div class="mb-4">
        <div class="d-flex mb-2">
            <div id="encode-op" class="operation-button active">{{ get_text('encode', current_language) }}</div>
            <div id="decode-op" class="operation-button">{{ get_text('decode', current_language) }}</div>
        </div>
        <div id="operation-desc" class="operation-desc w-100 mb-3"></div>
    </div>
    
    <!-- 输入区域 -->
    <div class="mb-4">
        <label for="input-text" class="form-label">{{ get_text('input_text', current_language) }}</label>
        <div class="d-flex mb-2">
            <button id="add-example" class="example-btn btn btn-sm btn-outline-primary">{{ get_text('load_example', current_language) }}</button>
            <button id="clear-input" class="clear-btn btn btn-sm btn-outline-secondary ms-auto">{{ get_text('clear', current_language) }}</button>
        </div>
        <textarea id="input-text" class="form-control" placeholder="{{ get_text('input_placeholder', current_language) }}"></textarea>
    </div>
    
    <!-- 输出区域 -->
    <div class="mb-4">
        <label for="output-text" class="form-label">{{ get_text('encoding_result', current_language) }}</label>
        <div class="d-flex mb-2">
            <button id="copy-result" class="copy-btn btn btn-sm btn-outline-primary ms-auto">{{ get_text('copy_result', current_language) }}</button>
        </div>
        <textarea id="output-text" class="form-control" placeholder="{{ get_text('result_placeholder', current_language) }}" readonly></textarea>
    </div>
    
    <!-- 编码说明 -->
    <div id="encoding-description" class="tool-description">
        <h5>{{ get_text('base64_description_title', current_language) }}</h5>
        <p>{{ get_text('base64_description_content', current_language) }}</p>
    </div>
</div>

<script src="/static/js/encoding-converter.js"></script>
{% endblock %}